<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>每日日记</title>
    <style>
        button{
            margin: 0;
            padding: 0 15px;
            display: inline-block;
            height: 33px;
            border: 1px solid rgb(223, 223, 223);
            box-sizing: border-box;
        }
        .outer{
            padding: 30px 50px;
            background-color: rgb(223, 223, 223);
        }
        .editor{
            background-color: #fff;
            border:1px solid rgb(184, 184, 184);
            min-height: 80vh;
        }
    </style>
</head>
<body>
    <!-- <form action="?s=/index/upload" enctype="multipart/form-data" method="post">
        <input type="file" name="image" id="">
        <input type="submit" value="upload">
    </form> -->
    <div id="app">
        <!-- {{ message }} -->
        <div class="nav">
            <span :title="time2">添加时间：{{time}}</span>&nbsp;
            <button @click="save">保存</button>&nbsp;
            <button @click="save_ret" > 保存返回</button>
        </div>
        <hr>
        <div class="document-editor__toolbar"></div>
        <div class="outer">
            <div class="editor"></div>
        </div>
        
    </div>

    <script src="static/build/ckeditor.js"></script>
    <script type="module">


    function get(url){
        return new Promise((resolve,reject)=>{
            let xhr = new XMLHttpRequest();
            xhr.open("GET",url)
            xhr.responseType="json"
            xhr.addEventListener("loadend",(ev)=>{
                if(xhr.readyState==4){
                    resolve(xhr.response)
                }
            })
            xhr.send()
        })
    }

    function post(url,formdata){
        return new Promise((resolve,reject)=>{
            let xhr = new XMLHttpRequest();
            xhr.open("POST",url)
            let _formdata = new FormData();
            for(let key in formdata){
                _formdata.append(key,formdata[key])
            }
            
            // xhr.setRequestHeader("content-type","multipart/form-data")

            xhr.responseType="json"
            xhr.addEventListener("loadend",(ev)=>{
                if(xhr.readyState==4){
                    resolve(xhr.response)
                }
            })
            xhr.send(_formdata)
        })
        
    }
    
    class UploadAdapter {
        constructor(loader) {
            this.loader = loader;
        }
        upload() {
            return new Promise(async (resolve, reject) => {
                let file = await this.loader.file
                console.log(file)
                let res = await post("?s=/index/upload",{
                    image:file
                })
                resolve({
                    default:res.url
                })

            });
        }
        abort() {
        }
    }
    
    
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    
    createApp({
        data() {
            return {
                message: 'Hello Vue!',
                time:'',
                time2:'',
                list:[
                    {
                        content:"1<br/>123213<br/>asdasdsaasdas21",
                        add_time:"2023-05-12 00:00:00"
                    },
                    {
                        content:"2",
                        add_time:"2023-05-12 00:00:00"
                    },
                    {
                        content:"3",
                        add_time:"2023-05-12 00:00:00"
                    },
                ]
            }
        },
        methods:{
            save(){
                post("?s=/index/save",{
                    content:window.editor.getData(),
                    content_text:document.querySelector(".outer").innerText
                }).then(v=>{
                    alert("请求成功")
                })
            },
            save_ret(){
                post("?s=/index/save",{
                    content:window.editor.getData(),
                    content_text:document.querySelector(".outer").innerText
                }).then(v=>{
                    location.href="?s=/index/index"
                })
                
            }
        },
        mounted(){

            setInterval(() => {
                get("?s=/index/read").then((v)=>{
                    this.time=v.add_time
                    this.time2=v.add_time2
                })
            }, 1000*60);

		    DecoupledDocumentEditor
            .create( document.querySelector( '.editor' ), {
                
                licenseKey: '',
                
                
            } )
            .then( editor => {
                window.editor = editor;
        
                window.editor.plugins.get('FileRepository').createUploadAdapter = (loader)=>{
                    return new UploadAdapter(loader);
                };
                // Set a custom container for the toolbar.
                document.querySelector( '.document-editor__toolbar' ).appendChild( editor.ui.view.toolbar.element );
                document.querySelector( '.ck-toolbar' ).classList.add( 'ck-reset_all' );

                get("?s=/index/read").then((v)=>{
                    window.editor.setData(v.content)
                    this.time=v.add_time
                    this.time2=v.add_time2
                })

            } )
            .catch( error => {
                console.error( 'Oops, something went wrong!' );
                console.error( 'Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:' );
                console.warn( 'Build id: n79znh1e2udz-u9490jx48w7r' );
                console.error( error );
            } );
        }
    }).mount('#app')
    </script>
</body>
</html>